import { Button, Divider, Dropdown, Form, Icon, Menu, message, Popconfirm ,Typography,Tag   } from 'antd';
import React, {useRef, useState} from 'react';
import { FormComponentProps } from 'antd/es/form';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable, {ActionType, ProColumns, UseFetchDataAction} from '@ant-design/pro-table';
import CreateForm from './components/CreateForm';
import { TableListItem } from './data.d';
import { queryTeacherCourse, putTeacherCourse } from './service';
interface TableListProps extends FormComponentProps {}

const TableList: React.FC<TableListProps> = () => {
  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
  const [stepFormValues, setStepFormValues] = useState({});
  const actionRef = useRef<ActionType>();
  const { Text } = Typography;
  const columns: ProColumns<TableListItem>[] = [
    {
          title: '姓名',
          dataIndex: 'username',
        },
        {
          title: '电话',
          dataIndex: 'mobile',
        },
        {
          title: '学号',
          dataIndex: 'student_number',
        },
        {
          title: '邮箱',
          dataIndex: 'email',
        },
        {
          title: '分数',
          dataIndex: 'score',
          sorter: {
            compare: (a, b) => a.score - b.score,
            multiple: 1,
          },
        },
        {
          title: '课程',
          dataIndex: 'course_name',
        },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            onClick={() =>
            {
              localStorage.setItem('course_id',record.key)
              localStorage.setItem('user_id',record.user_id)

              handleModalVisible(true)}}
          >
            打分
          </a>

        </>
      ),
    },
  ];

  const handleAdd = async (fields: any) => {
    const hide = message.loading('正在修改成绩');
    try {
      let result = await putTeacherCourse({
        id:localStorage.getItem('user_id'),
        course_id:localStorage.getItem('course_id'),
        ...fields
      });
      if(result.data == true){
        hide();
        actionRef.current.reload();
        message.success('修改成功');
        return true;
      }
    } catch (error) {
      hide();
      message.error('修改失败请重试！');
      return false;
    }
  };

  return (
    <PageHeaderWrapper>
      <ProTable<TableListItem>
        headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="key"
        toolBarRender={(action, { selectedRows }) => [

      ]}
        request={params => queryTeacherCourse(params)}
        columns={columns}
        />
        <CreateForm
          onSubmit={async value => {
            const success = await handleAdd(value);
            if (success) {
              handleModalVisible(false);
              actionRef.current.reload();
            }
          }}
          onCancel={() => handleModalVisible(false)}
          modalVisible={createModalVisible}
        />
    </PageHeaderWrapper>
);
};
export default TableList;
